<!-- 筛选模块 -->
<template>
  <!-- 筛选项 -->
  <el-row class="filter-mod">
    <!-- 项目类型 -->
    <div class="project_1">
      <div class="item" style="borderTop: 1px solid #eee">
        <div class="title">项目类型</div>
        <div class="content">
          <div class="content-item" v-for="(item,index) in list1" :key="item.type">
            <span
              class="one"
              @click="oneClick1(index,item)"
              :class="index===currentIndex1?'oneActive':''"
            >{{item.lab}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 所在城市 -->
    <div class="item">
      <div class="title">所在城市</div>
      <div class="content">
        <div
          class="content-item"
          :style="{'padding-bottom': index===currentIndex2?heightPX:0}"
          v-for="(item,index) in list2"
          :key="item.value"
        >
          <span
            class="one"
            @click="oneClick(index,item)"
            :class="index===currentIndex2?'oneActive':''"
          >{{item.name}}</span>
          <div class="insert-content" ref="insertRef" v-if="index===currentIndex2&&index!==0">
            <div
              class="insert-content-item"
              v-for="(ite,ind) in cityList"
              :key="ind"
              :style="{'color': insertItemind==ind?'#163da0':''}"
              @click="insertClick(ite,ind)"
            >{{ite.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 项目金额 -->
    <div class="project_1">
      <div class="item">
        <div class="title">项目金额</div>
        <div class="content">
          <div class="content-item" v-for="(item,index) in list3" :key="item.priceRange">
            <span
              class="one"
              @click="oneClick3(index,item)"
              :class="index===currentIndex3?'oneActive':''"
            >{{item.lab}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 项目状态 -->
    <div class="project_1">
      <div class="item">
        <div class="title">项目状态</div>
        <div class="content">
          <div class="content-item" v-for="(item,index) in list4" :key="item.priceRange">
            <span
              class="one"
              @click="oneClick4(index,item)"
              :class="index===currentIndex4?'oneActive':''"
            >{{item.lab}}</span>
          </div>
        </div>
      </div>
    </div>
  </el-row>
</template>

<script>
import {filterSet} from '@/utils/setting'

import {getProvince, getCity} from '../../plugins/area-data/areaData'

export default {
  name: 'filterMod',
  components: {},
  data() {
    return {
      list1: filterSet.typeList,
      list2: this.handleProvinceList(),
      list3: filterSet.moneyList,
      list4: filterSet.stateList,

      currentIndex1: 0,
      currentIndex2: 0,
      currentIndex3: 0,
      currentIndex4: 0,
      insertItemind: -1,
      heightPX: 0,
      cityList: null,
      fromData: {
        type: null,
        businessState: null,
        priceRange: null,
        province: null,
        city: null
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取省份
    handleProvinceList() {
      let obj = getProvince('86')
      var arr = [] //创建一个数组
      for (var key in obj) {
        var temp = {}
        temp.name = obj[key]
        temp.value = key
        arr.push(temp)
      }
      arr.unshift({name: '全部', value: null})
      return arr
    },
    // 获取市级
    handleCityList(val) {
      let obj = getCity(val)
      var arr = [] //创建一个数组
      for (var key in obj) {
        var temp = {}
        temp.name = obj[key]
        temp.value = key
        arr.push(temp)
      }
      return arr
    },
    // 获取项目状态
    oneClick4(index, item) {
      this.currentIndex4 = index
      this.fromData.businessState = item.businessState
      this.$emit('setfilter', this.fromData)
    },
    // 获取项目类型
    oneClick3(index, item) {
      this.currentIndex3 = index
      this.fromData.priceRange = item.priceRange
      this.$emit('setfilter', this.fromData)
    },
    // 获取项目类型
    oneClick1(index, item) {
      this.currentIndex1 = index
      this.fromData.type = item.type
      this.$emit('setfilter', this.fromData)
    },

    // 获取市级菜单值
    insertClick(item, index) {
      this.insertItemind = index
      this.fromData.city = item.value
      this.$emit('setfilter', this.fromData)
    },
    // 获取省级菜单值
    oneClick(index, item) {
      this.currentIndex2 = index
      this.insertItemind = -1
      this.fromData.province = item.value
      if (!item.value) {
        this.$emit('setfilter', this.fromData)
      } else {
        this.cityList = this.handleCityList(item.value)
        if (index !== 0) {
          this.$nextTick(() => {
            // 获取对象的高度
            this.heightPX = this.$refs.insertRef[0].offsetHeight + 8 + 'px'
            // 设置市级菜单偏移量
            let num = (index + '').split('')
            if (index >= 10) {
              this.$refs.insertRef[0].style.left = num[1] * -99 + 'px'
            } else {
              // console.log(num)
              this.$refs.insertRef[0].style.left = num[0] * -99 + 'px'
            }
          })
        } else {
          this.heightPX = '0px'
        }
      }
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang='less' scoped>
.filter-mod .project_1 {
  .item {
    .content {
      &-item {
        width: unset;
        margin-right: 12px;
      }
    }
  }
}

.oneActive {
  color: #163da0;
  background: #f7f7f7;
}

.filter-mod {
  width: 100%;

  font-size: 14px;
  color: #333333;
  line-height: 30px;
  .item {
    border: 1px solid #eeeeee;
    border-top: unset;
    display: flex;
    .title {
      width: 146px;
      box-sizing: border-box;
      padding: 8px 16px;
      background: #f5f5f5;
      text-align: center;
      border-right: 1px solid #eee;
    }
    .content {
      flex: 1;
      background-color: #fff;
      padding: 8px 0;
      display: flex;
      flex-wrap: wrap;
      &-item {
        box-sizing: border-box;
        width: 99px;
        padding-left: 12px;
        position: relative;
        .one {
          display: inline-block;
          padding: 0 12px;
          line-height: 30px;
        }
        .one:hover {
          color: #163da0;
          background: #f7f7f7;
        }
        .insert-content {
          width: 984px;
          position: absolute;
          z-index: 10;
          display: flex;
          padding: 6px 4px;
          background-color: #f7f7f7;
          flex-wrap: wrap;
          div {
            line-height: 16px;
            padding: 6px 12px;
            margin-right: 10px;
          }

          &-item:hover {
            color: #163da0;
          }
        }
      }
    }
  }
}
</style>